<template>
  <div class="login-phone">
    <el-form label-width="70px" :rules="phone_rules" :model="cellPhone">
      <el-form-item label="手机号" prop="number">
        <el-input v-model="cellPhone.number"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="verifyCode">
        <div class="verify-code">
          <el-input v-model="cellPhone.verifyCode"></el-input>
          <el-button type="primary" class="sendCode">发送验证码</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { phone_rules } from '../config';
import { reactive, defineExpose } from 'vue';
const cellPhone = reactive({
  number: '',
  verifyCode: ''
});
const loginAction = () => {
  console.log('我是手机号登陆');
};
defineExpose({
  loginAction
});
</script>

<style scoped lang="less">
.login-phone {
  .verify-code {
    display: flex;
    .sendCode {
      margin-left: 10px;
    }
  }
}
</style>
